<template>
    <Page class="bank-list">
      <!--企业开户行-->
      <div class="log-list">
        <div class="log-list-div">
          <van-search
            v-model="searchValue"
            placeholder="请输入银行名称"
            action-text="搜索"
            @input="searchBank"
          />
        </div>
      </div>
      <div class="bank-body">
        <van-cell
          v-for="(item, index) in bankList"
          clickable
          :key="index"
          :title="item.bankName"
          @click="toggle(item)"
        >
          <template #right-icon>
            <van-checkbox
              :value="item.checked"
              ref="checkboxes"
            />
          </template>
        </van-cell>
      </div>
  
      <!-- 底部的按钮 -->
      <div class="bank-btn">
        <van-button
          type="default"
          round
          class="bank-btn-item"
          @click="clickCancel"
        >取消</van-button>
        <van-button
          type="info"
          round
          class="bank-btn-item"
          @click="clickConfirm"
        >确定</van-button>
      </div>
    </Page>
  </template>
  
  <script>
  
  export default {
    name: "bankList",
    components: {
    },
    data () {
      return {
        // form表单
        form: {
  
        },
        radio: '0',
        searchValue: '',
        selectIds: [],
      };
    },
    props: {
      bankList: {
        type: Array,
        default: function () {
          return [];
        }
      },
      limit: {
        type: Number,
        default: 0
      }
    },
    created () {
  
    },
    methods: {
      changeBox () {
        // console.log(this.selectIds, 'selectIds')
      },
      clickCancel () {
        this.$emit('cancel')
      },
      clickConfirm () {
        this.$emit('clickConfirm')
      },
      submitForm () {
        if (!this.vali.status) {
          utils.ui.confirm("提交成功");
        }
      },
      searchBank () {
        this.$emit('searchBank', this.searchValue)
      },
      toggle (item) {
        console.log(item, 'item')
        const hasSelectList = this.bankList.filter(pre=>pre.checked)
        if(this.limit) {
          if(hasSelectList.length > this.limit - 1) {
            if(!item.checked) {
              this.$toast(`最多选择${this.limit}家！`)
            } else {
              item.checked = !item.checked
            }
          } else {
            item.checked = !item.checked
          }
        } else {
          item.checked = !item.checked
        }
        this.$forceUpdate()
      },
      clearValue () {
        this.searchValue = ''
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  @import "@/assets/css/demo/index.scss";
  .bank-list {
    border-top: 1px solid rgba(255, 255, 255, 0);
    position: fixed;
    left: 0;
    top: 0;
    background: #ffffff;
    z-index: $zIndex-popup;
    overflow-y: auto;
    // border: 1px solid red;
    height: 100vh;
    padding-bottom: 90px;
  }
  .bank-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    // border: 1px solid red;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #ffffff;
    // box-shadow: 0 0 0 1px rgba(131, 128, 128, 0.3);
    .bank-btn-item {
      width: 30%;
    }
  }
  </style>
  
  
  